<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(val) {
            var a = document.getElementById(val);
            a.style.background = 'red';
        }
        function f1(val) {
            var a = document.getElementById(val);
            a.style.background = 'white';
        }
    </script>
</head>
<body>
    <ul style="width: 80px;">
        <div style="background-color: white">
            <li id="zg" onclick="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">中国</li>
            <li id="mg" onclick="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">美国</li>
            <li id="rb" onclick="f(this.id)" onmouseout="f1(this.id)" style="font-size: 15px">日本</li>
            <li id="ydl" onclick="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">意大利</li>
            <li id="fg" onclick="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">法国</li>
            <li id="dg" onclick="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">德国</li>
            <li id="xjp" onclick="f(this.id)" onmouseout="f1(this.id)"  style="font-size: 15px">新加坡</li>
        </div>
    </ul>
</body>
</html>